<template>
  <!-- 运营管理-模板选择 -->
  <div class="editeTeacher">
    <div class="content-popup">
      <div class="box-basicInfo">
        <el-form
            :model="basicInfo.ruleForm"
            ref="basicInfo-ruleForm"
            label-width="1.6rem"
            class="ruleForm"
          >
          <el-form-item class="is-required" label="教师名称">
            <el-input placeholder="请输入教师名称" v-model="basicInfo.ruleForm.schoolName"></el-input>
          </el-form-item>
          <el-form-item class="is-required" label="从教开始时间" >
            <el-input placeholder="请输入从教开始时间" v-model="basicInfo.ruleForm.schoolAddress"></el-input>
          </el-form-item>
          <el-form-item class="is-required" label="头像" >
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="basicInfo_handlePictureCardPreview"
              :on-remove="basicInfo_handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="basicInfo.ruleForm.dialogVisible">
              <img width="100%" :src="basicInfo.ruleForm.dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item class="is-required" label="个人简介" >
            <el-input placeholder="请输入个人简介" type="textarea" :rows="5" v-model="basicInfo.ruleForm.schoolTel"></el-input>
          </el-form-item>
          <el-form-item class="is-required" label="展示序号" >
            <el-input placeholder="数字" v-model="basicInfo.ruleForm.schoolTel"></el-input>
          </el-form-item>
          <el-form-item  label="" >
            <el-button class="cancel" type="primary" >取消</el-button>
            <el-button class="ok" type="primary" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['editeTeacher'],
  data() {
    return {
      parentData:this.editeTeacher,
      editeType:'',
      basicInfo:{
        ruleForm: {
          schoolName: "",
          schoolAddress: "",
          schoolTel: "",
          promotion:'',
          dialogImageUrl: '',
          dialogVisible: false
        },
      },
    };
  },
  methods: {
    init(){
      let user=JSON.parse(tool.getItem(window.lsKey.user));
    },
    campusChange : function(campusId) { //校区改变
      this.init();
    },
    basicInfo_handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    basicInfo_handlePictureCardPreview(file) {
      this.basicInfo.ruleForm.dialogImageUrl = file.url;
      this.basicInfo.ruleForm.dialogVisible = true;
    },
    save(){
      if(this.parentData.type=='add'){
        this.$emit('callback',{
          teacherName:'新增',
          teacherImage:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          years:'13年',
          introduce:'测试除删除是测试',
          visitCount:'11212'
        });
      }
      else if(this.parentData.type=='edite'){
        this.$emit('callback',{
          teacherName:'编辑',
          teacherImage:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
          years:'13年',
          introduce:'测试除删除是测试',
          visitCount:'11212'
        });
      }
      this.parentData.visible=false;
    }
  },
  mounted() {
	  this.init();
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.editeTeacher {
  .content-popup {
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
    .box-basicInfo{
      .el-input{
        width: 3rem !important;
      }
    }
    .box-detailInfo{

    }
  }
  // 滚动条
  .scrollbarstyle::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.1rem;
  }
  .scrollbarstyle::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #BBBBBB;
  }
  .scrollbarstyle::-webkit-scrollbar-track {
    background: #F2F6FC;
  }
}
.ow_editeTeacherPopup{
  top: 0.81rem !important;
  left: 2.1rem !important;
  background-color: rgba(0,0,0,0.3);
  .el-dialog{
    width: 12.2rem;
    .el-dialog__header{
      text-align: center;
    }
    .el-dialog__title{
      font-size: 0.25rem;
      font-weight: bold;
      color: #333333;
      
    }
    .el-dialog__headerbtn{
      font-size: 0.25rem !important;
    }
  }
}
</style>